<div id="mainseting">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ntModalLabel">仓库添加/更改</h4>
    </div>
    <div class="modal-body formbox">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover ntTable">
                    <tr>
                        <td>名称<span class="required"></span></td>
                        <td colspan="3"><input type="text" name="name" class="form-control" v-model="name"></td>
                    </tr>
                    <tr>
                        <td>国家<span class="required"></span></td>
                        <td>
                            <select class="form-control col-md-2" v-model="country_id"
                                    @change="selchangefun('provinces',country_id,'provinces')">
                                <option :value="item.id" v-for="(item,index) in countryname">{{item.name}}</option>
                            </select>
                        </td>
                        <td>省份<span class="required"></span></td>
                        <td>
                            <select class="form-control" v-model="province_id">
                                <option value="" selected>{:lang('please_select')}</option>
                                <option :value="item.id" v-for="(item,index) in provinces">{{item.name}}</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <input type="hidden" id="act" name="act" value="{$str}">
        <input type="hidden" name="id" id="id" value="{$id|default=''}">
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove"></span>取消
        </button>
        <button type="button" :disabled="isdisadble" @click="subfun" class="btn btn-primary" style="padding-left:24px;padding-right:24px"><span
                class="glyphicon glyphicon-floppy-disk"></span>保存
        </button>
    </div>
</div>
<script>
    new Vue({
        el: '#mainseting',
        data: () => ({
            isdisadble: false,
            name: '',
            country_id: '1',
            province_id: '',
            countryname: [],
            provinces: []
        }),
        methods: {
            //保存数据
            subfun(){
                this.isdisadble = true;
                $.ajax({
                    url: '/admin/warehouses/' + $('#act').val(),
                    data: {
                        name: this.name,
                        country_id: this.country_id,
                        province_id: this.province_id,
                        act: $('#act').val(),
                        id: $('#id').val()
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        if (data.status != 1) {
                            change_mes_type('.modal-body .alert', data.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*' + data.msg + '<br>')
                        } else {
                            change_mes_type('#headeralert', data.status)
                            $('#headeralert').show()
                            $('#headeralert p').html('*' + data.msg + '<br>')
                            $('#warehouse_editModal').modal('hide');
                        }
                        this.isdisadble = false;
                    }
                })
            },
            //进入的数据
            getalldata(){
                $('.loding').show();
                $.ajax({
                    url: '/admin/warehouses/' + $('#act').val(),
                    data: {
                        id: $('#id').val(),
                        getdata: ''
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        this.countryname = data.countrys;
                        if (data.info) {
                            //处理编辑
                            this.name = data.info.name,
                                this.country_id = data.info.country_id
                            this.province_id = data.info.province_id
                        }
                        this.selchangefun('provinces', this.country_id, 'provinces')
                        $('.loding').hide();
                    }
                })
            },
            selchangefun(type, val, key){
                return new Promise((res, rej) => {
                    $.ajax({
                        url: '/admin/api/getprovinces',
                        type: 'post',
                        data: {
                            tables: type,
                            id: val
                        },
                        success: (data) => {
                            data = JSON.parse(data);
                            this.provinces = data;
                            res()
                        }
                    })
                })

            },
        },
        created() {
            this.getalldata()
        }
    })
</script>